<template>
  <div class="score-visit page">
    <div class="mian" v-if="scoreItemMap&&scoreMap">
      <my-header :title="todo.title"  :date="parseTime(todo.date)"></my-header>
      <label-location :location="todo.address"></label-location>
      <span class="set-time" >{{todo.addressTime}}</span>
      <score-img  class="plane" v-model="scoreMap['groupImg']" :max="scoreItemMap['groupImg'].score" :title="scoreItemMap['groupImg'].name" icon="iconpengyou" :imgs="todo.groupImg"></score-img>
      <span class="set-time" v-if="todo.groupTime">{{todo.groupTime}}</span>
      <score-txt class="plane" v-model="scoreMap['summary']" :max="scoreItemMap['summary'].score" :title="scoreItemMap['summary'].name" icon="iconwanchenggoutong" :txt="todo.summary"></score-txt>
      <span class="set-time" style="margin-bottom: 40px">逗留时间 : {{perDate}}</span>
      <div @click="confirm" class="btns" v-if="canEdit">
        提交
      </div>
    </div>
  </div>
</template>

<script>
import myHeader from '../../components/header'
import scoreImg from '../../components/score-img'
import scoreTxt from '../../components/score-txt'
import labelLocation from '../../components/label-location'
import { get } from '../../api/todo'
import { parseTime, str2Date } from '../../util/time'
import { score, list } from '../../api/score'
import { showConfirm, showCorrect, showAlert } from '../../dialog'
import { mapState } from 'vuex'

export default {
  created () {
    this.todoId = this.$route.query.id
    get(this.todoId).then(res => {
      this.todo = res.data
    })
    list(this.todoId).then(res => {
      this.scoreItemMap = res.extra.scoreItemMap
      if (res.data && res.data.length > 0) {
        // this.scores = res.data
        this.scoreMap = res.extra.scoreMap
      } else {
        this.scoreMap = {}
        for (const k in this.scoreItemMap) {
          this.scoreMap[k] = {}
        }
        // this.scoreMap = this.scoreItemMap.map(item => {
        //   const m = {}
        //   m[item.val] = { point: 0 }
        //   return m
        // })
      }
    })
  },
  computed: {
    ...mapState({
      userId: state => state.user.id
    }),
    canEdit () {
      return this.todo.userId !== this.userId && this.todo.status === 1
    },
    perDate () {
      if (!this.todo.addressTime) return 0
      const time = str2Date(this.todo.doneTime).getTime() - str2Date(this.todo.addressTime).getTime()
      return Math.floor(time / 1000 / 60) + '分钟'
    },
    recordTxt () {
      let txt = ''
      if (!this.records) return txt
      this.records.forEach(record => {
        txt += record.goodsName + record.number + '件,'
      })
      return txt
    }
  },
  data () {
    return {
      todoId: null,
      todo: {},
      records: [],
      scoreItemMap: null,
      scoreMap: null
    }
  },
  methods: {
    parseTime (time) {
      return parseTime(time, '{y}-{m}-{d}')
    },
    confirm () {
      let totalScore = 0
      let flag = true
      Object.values(this.scoreMap).forEach(score => {
        if (score.point) {
          totalScore += parseInt(score.point)
        } else if (score.required) { // 没有评分但是需要评分
          flag = false
        }
      })
      if (!flag) {
        showAlert('请填写所有评分项')
        return
      }
      showConfirm('是否确认提交', '当前总分' + totalScore).then(res => {
        if (!res) return
        score(this.todoId, this.scoreMap).then(res => {
          showCorrect('提交成功!').then(res => {
            this.$router.back()
          })
        })
      })
    }
  },
  components: {
    myHeader, scoreImg, scoreTxt, labelLocation
  }
}
</script>

<style scoped lang="stylus">
.set-time
  font-size 11px
  color #B9B7C0
  line-height 11px
  display block
  margin 10px 10px
.score-visit
  .plane
    margin-top 11px
  .btns
    display flex
    align-items center
    justify-content center
    margin 20px 0
    height 44px
    background:rgba(12,147,79,1);
    border-radius:20px;
    dpr-font(15Px)
    color white
</style>
